<template>

	<view class="new-file">
		<view class="search">
			<u-search height="60rpx" searchIconColor="#4b3138" :showAction="false" placeholder="搜索套餐" shape="square"
				 @change="keyWordchange" v-model="keyword" @click="searchFocus"></u-search>
		</view>
		<!-- <view slot="empty">
      <Empty />
    </view> -->
		<!-- 第一种方法 -->
		<!-- 头部选项卡 -->
		<view class="head-nav">
			<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">全部</view>
			<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">待预约</view>
			<!-- <view :class="navIndex==5?'activite':''" @click="checkIndex(5)">拼团中</view> -->
			<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">已预约</view>
			<view :class="navIndex==4?'activite':''" @click="checkIndex(4)">已完成</view>
			
		</view>
		<!-- 内容切换 -->
		<scroll-view  class="scroll-content"
    scroll-y
    style="height: 80vh;"
    @scrolltolower="onScrollToLower">
	<!-- 	<z-paging ref="paging"  style="margin-top: 200rpx;;" refresher-only    @onRefresh="onRefresh" @query="queryList"> -->
		<view class="content" v-if="navIndex==1">
			<!-- 带预约 -->
			<view class="content">
				<view class="content-item" v-for="( item,index) in dataList" @click="ToorderDetail(item)">
					<view class="top">订单编号: {{item.orderNo}}</view>
					<view class="Photo-item">
						<view class="photo">
							<image :src="url+item.meal.imagePath.split(',')[0]" mode="" style="width:100%;height:100%;"></image>
						</view>
						<view class="txt">
							<view class="txt-top"> 
								{{item.meal.setMealName}}
							</view>
							<view class="txt-bottom">
								{{item.meal.packageDescription}}
							</view>
						</view>
					</view>
					<view class="bottom-item">
						<view class="bottom" v-if="item.date"  >
						   	{{item.date}}- {{item.startTime}}-{{item.endTime}}
						</view>
						<view v-else class="bottom">
							 等待信息填写
						</view>
						<view  @click.stop="toPage(item)" class="info" :style="{ backgroundColor : item.status==1?  '#FE7A3E' : item.status==4? '#EEF8FF' :  item.status==2? '#159DFF' : '',color:item.status==4? '#159DFF' : ''  }">{{item.status==1? '信息填写'  : item.status==4?  '信息修改' :  item.status==2? '查看报告' : ''}}</view>
					</view>

				</view>
			</view>

			<!-- 已预约 -->

			<!-- 已完成 -->


		</view>
		<!-- 待预约 -->
		<view class="content" v-if="navIndex==2">
			<view class="content">
				<view class="content-item" v-for="( item,index) in dataList" @click="toPage(item)">
					<view class="top">订单编号: {{item.orderNo}}</view>
					<view class="Photo-item">
						<view class="photo">
							<image :src="url+item.meal.imagePath.split(',')[0]" mode="" style="width:100%;height:100%;"></image>
						</view>
						<view class="txt">
							<view class="txt-top">
									{{item.meal.setMealName}}
							</view>
							<view class="txt-bottom">
							{{item.meal.packageDescription}}
							</view>
						</view>
					</view>
					<view class="bottom-item">
					<view class="bottom" v-if="item.date"  >
					   	{{item.date}}- {{item.startTime}}-{{item.endTime}}
					</view>
					<view v-else class="bottom">
						 等待信息填写
					</view>
						<view class="info" >信息填写</view>
					</view>

				</view>
			</view>
		</view>
		
		<!-- 拼团中 -->
		
		<view class="content" v-if="navIndex==5">
			<view class="content">
				<view class="content-item" v-for="( item,index) in dataList"  @click="ToorderDetail(item)">
					<view class="top">订单编号: {{item.orderNo}}</view>
					<view class="Photo-item">
						<view class="photo">
							<image :src="url+item.meal.imagePath.split(',')[0]" mode="" style="width:100%;height:100%;"></image>
						</view>
						<view class="txt">
							<view class="txt-top">
									{{item.meal.setMealName}}
							</view>
							<view class="txt-bottom">
									{{item.meal.packageDescription}}
							</view>
						</view>
					</view>
					<view class="bottom-item">
						<view class="bottom">
							{{item.date}}- {{item.startTime}}-{{item.endTime}}
						</view>
						<view class="info4" @click="toPage(item)">查看体检报告</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 已预约 -->
		<view class="content" v-if="navIndex==3">
			<view class="content"> 
				<view class="content-item" v-for="( item,index) in dataList" @click="ToorderDetail(item)">
					<view class="top">订单编号: {{item.orderNo}}</view>
					<view class="Photo-item">
						<view class="photo">
							<image :src="url+item.meal.imagePath.split(',')[0]" mode="" style="width:100%;height:100%;"></image>
						</view>
						<view class="txt">
							<view class="txt-top">
								{{item.meal.setMealName}}
							</view>
							<view class="txt-bottom">
								{{item.meal.packageDescription}}
							</view>
						</view>
					</view>
					<view class="bottom-item">
						<view class="bottom">
							{{item.date}}- {{item.startTime}}-{{item.endTime}}
						</view>
						<view class="info3"  @click.stop="toPage(item)">修改预约</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 已完成 -->
		<view class="content" v-if="navIndex==4">
			<view class="content">
				<view class="content-item" v-for="( item,index) in dataList"  @click="ToorderDetail(item)">
					<view class="top">订单编号: {{item.orderNo}}</view>
					<view class="Photo-item">
						<view class="photo">
							<image :src="url+item.meal.imagePath.split(',')[0]" mode="" style="width:100%;height:100%;"></image>
						</view>
						<view class="txt">
							<view class="txt-top">
									{{item.meal.setMealName}}
							</view>
							<view class="txt-bottom">
									{{item.meal.packageDescription}}
							</view>
						</view>
					</view>
					<view class="bottom-item">
						<view class="bottom">
							{{item.date}}- {{item.startTime}}-{{item.endTime}}
						</view>
						<view class="info4" @click.stop="toPage(item)">查看体检报告</view>
					</view>
				</view>
			</view>
		</view>
     <!--   </z-paging> -->
      <image  v-if="!dataList.length" src="../../static/images2/empty.png"  style=" position: absolute; left: 50%; transform: translateX(-50%); width: 400rpx; height: 400rpx;"></image>
    </scroll-view>


	</view>

</template>

<script>
	import {baseUrl} from "@/config.js"
	import order from "@/api/order";
    import keyboard from "../../uni_modules/uview-ui/libs/config/props/keyboard";
	export default {
		data() {
			return {
				navIndex: 1,
				keyword: "",
			    stasus:null,
				navList: ["全部", "待预约", "已预约", "已完成"],
				listIndex: 0,
				dataList: [],
                dataList2:[],
				dataList4: [],
				url:"",
				pageNum:1,
			
			}
		},
	
		onLoad: function(options) {
			
				uni.$on('updateData3',(data)=>{
					  this.getOrderList()
				})
			setTimeout(function() {
				console.log('start pulldown');
			}, 1000);
			//页面加载时就进行一次页面的下拉, 如果不需要可以不写
		//	uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			
			if(this.navIndex == 1){
				this.getOrderList()
			}else{
					this.getOrderList({status:this.navIndex,})
			}
			
		
			
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		methods: { 
			onScrollToLower(){
				 //触底加载
				
			        this.pageNum++;
				 	this.getOrderListPage({
						status:this.navIndex,
						pageNum:this.pageNum,
						pageSize:10,
					})
				 console.log("触底了")
			},
			toPage(item) {
                console.log(66666)
				if(item.status === 4) 
					if(new Date().getTime()  > new Date(item.date +' ' + item.endTime).getTime())	 return  this.$u.toast("已过体检时间不可修改,请等待体检结果")				
			
				uni.navigateTo({
				 url: `/subPages/${item.status === 1 ? `infoConfirm/infoConfirm?id=${item.id}&data=${item.orderNo}`
				        : item.status === 2 ? 'phyExaRep/phyExaRep' 
				        : item.status === 4 ? `infoConfirm/infoConfirm?orderNo=${item.orderNo}` 
				        : ''}` // 默认值，可根据需求调整
				})
			},
			
			checkIndex(index) {
				this.navIndex = index; //0未付款 1已付款 2已完成 3已退款 4已预约 5已关闭 6完成中
				this.pageNum = 1; 
				if (index == 1) {
					this.getOrderList()

				} else if (index == 2) {
					this.getOrderList({
						status: 1
					})
					this.stasus = 1

				} else if (index == 3) {
					this.getOrderList({
						status: 4
					})
                     this.stasus = 4
				}else if(index == 5){
				  	this.getOrderList({
				  		status: 5
				  	})
					   this.stasus = 5
				}
				 else {

					this.getOrderList({
						status: 2
					})
					   this.stasus = 2
				}
			},
			keyWordchange(){
				if(this.keyword.length<=0){
					
					 this.dataList =  this.dataList2
				     console.log(this.dataList2)
					 return 
				}
				 console.log(this.keyword, this.dataList )
				 if(!this.status){
					   this.dataList =  this.dataList.filter((item)=>item.meal.setMealName.includes(this.keyword))
				 }else{
					     this.dataList =  this.dataList.filter((item)=>item.meal.setMealName.includes(this.keyword)&&item.status == this.status)
				 }
				   
				 
			},
           ToorderDetail(item){
			 uni.navigateTo({
			 	url: `/subPages/testItem/testItem?data=${encodeURIComponent(JSON.stringify(item))}`,
			 })  
		   },
			checkListIndex(index) {
				this.listIndex = index;
			},
			async getOrderListPage(data){
				
				const res = await order.getOrderList(data)
			   
			    if(res.total<=this.dataList.length) return 
				
				this.dataList = [...this.dataList, ...res.rows];
			},
			async getOrderList(data = {}) {
				if (JSON.stringify(data) === '{}') {
					this.dataList = []
					const res = await order.getOrderList({
						status: 1
					})
					res.rows.forEach((item) => {
						this.dataList.push(item)
					})

					const res2 = await order.getOrderList({
						status: 4
					})
					res2.rows.forEach((item) => {
						this.dataList.push(item)
					})
					const res3 = await order.getOrderList({
						status: 2
					})
					res3.rows.forEach((item) => {
						this.dataList.push(item)
					})
					
				} else {
					const res = await order.getOrderList(data)
					console.log(res,"状态为5")
					this.dataList = res.rows
				}
              this.dataList2 =  this.dataList
			}
		},
		mounted() {
			this.url = baseUrl
			//获取所有订单列表
			this.getOrderList()

		}
	}
</script>

<style scoped>
	.new-file {
		height: 100vh;
		overflow-y: scroll;
	}

	.head-nav {
		/* width: 50%; */
		margin: 20rpx auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.activite {
		font-weight: bold;
		border-bottom: 6rpx solid #0065d9;
	}

	.head-nav>view {
		padding-bottom: 10rpx;
	}

	.box {
		background: #008000;
	}

	.search {
		width: 670rpx;
		height: 72rpx;
		background: #FFFFFF;
		// background: black;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		// padding: 20rpx 0;
		margin-left: 40rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/deep/.u-search__content {
		background: none !important;
	}

	/deep/.u-search__content__input {
		background: none !important;
	}

	.content {
		padding-left: 18rpx;
	}

	.content-item {
		width: 686rpx;
		box-sizing: border-box;
		padding: 20rpx;
		height: 294rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 20rpx;
	}

	.top {

		height: 34rpx;

		font-weight: 500;
		font-size: 24rpx;
		color: #333333;

	}

	.Photo-item {
		display: flex;
		margin-top: 10rpx;
	}

	.photo {
		width: 193rpx;
		height: 150rpx;
		background: #F6F6F6;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.txt {
		margin-left: 10rpx;
	}

	.txt-top {
		padding-top: 10rpx;
	}

	.txt-bottom {
		width: 334rpx;
		height: 68rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #626262;
		margin-top: 10rpx;
		text-align: left;
		font-style: normal;
		font-size: 24rpx;
		text-transform: none;
	}

	.info {
		margin-top: 20rpx;
		width: 112rpx;
		height: 50rpx;
	    background-color: #FE7A3E;
		text-align: center;
		line-height: 50rpx;

		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
	}

	.info3 {
		width: 112rpx;
		height: 50rpx;
		margin-top: 20rpx;
		background: #EEF8FF;
		font-size: 24rpx;
		color: #159DFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.info4 {
		margin-top: 20rpx;
		width: 160rpx;
		height: 50rpx;
		background: #159DFF;
		text-align: center;
		line-height: 50rpx;

		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
	}

	.bottom {
		/* width: 352rpx; */
		height: 42rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #159DFF;
		border: 1rpx solid #159DFF;
		text-align: left;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 28rpx;
		text-transform: none;
		padding: 0 8rpx;

	}

	.bottom-item {
		display: flex;
		color: white;
		justify-content: space-between;
	}
</style>